<script setup>
import { getTimeStr } from '@/utils/transIUtils'
import { useRouter, useRoute } from 'vue-router'
import LikeIcon from '@/components/svgComponents/LikeIcon.vue'
import CommentIcon from '@/components/svgComponents/CommentIcon.vue'

import PlayIcon from '@/components/svgComponents/PlayIcon.vue'
const props = defineProps({
  data: Object,
  isNoTops: Boolean,
})
const video_cover_mode = window.config_global.video_cover_mode
const router = useRouter()
const route = useRoute()

const handleClick = () => {
  // 如果路径有post,则去掉post及其后面的内容，否则直接添加post/id
  const path = route.path.replace(/\/post.*/, '')

  // router.push(`${path}/post/${props.data.id}`)
  router.push(`/home/post/${props.data.id}`)
}
</script>

<template>
  <div
    @click="handleClick"
    class="border-solid border-[0.5px] border-inherit bg-[--boxGround] rounded-md hover:shadow-md hover:-translate-y-1 cursor-pointer transition-all px-4 py-2 w-full flex gap-3 flex-col">
    <section class="w-full flex-shrink-0 overflow-hidden flex-cc rounded-lg aspect-[8/10]">
      <img
        v-if="data.media && data.media.length !== 0 && data.type !== 2"
        :src="data.media[0]"
        alt=""
        class="object-cover w-full h-full" />
      <div v-else-if="data.type !== 3 && data.type !== 2" class="text-[35px] font-medium line-clamp-5 p-3 pt-[30px]">
        {{ data.content }}
      </div>
      <div v-else class="relative">
        <!-- 七牛云 -->
        <img
          v-if="data.type == 2 && video_cover_mode === 'qiniu'"
          :src="data.media[0] + '?vframe/jpg/offset/1'"
          alt=""
          class="object-cover w-full h-full" />
        <!-- 阿里云 -->
        <img
          v-if="data.type == 2 && video_cover_mode === 'aliyun'"
          :src="data.media[0] + '?x-oss-process=video/snapshot,t_0,f_jpg'"
          alt=""
          class="object-cover w-full h-full" />
        <!-- 本地存储 -->
        <img
          v-if="data.type == 2 && video_cover_mode === 'local'"
          src="/imgs/videoBg.jpg"
          class="object-cover w-full h-full" />
        <div class="absolute bottom-0 left-0 w-full h-full flex-cc bg-black/30">
          <PlayIcon class="w-10 h-10" />
        </div>
      </div>
    </section>

    <section class="flex flex-col justify-between flex-1">
      <div class="flex gap-2 items-start">
        <div class="font-medium">{{ data.title }}</div>
        <div
          v-if="data.postInnerTop && !isNoTops"
          class="bg-[#2e5592] rounded-md p-2 py-1 text-xs text-white flex h-fit text-nowrap">
          置顶
        </div>
      </div>

      <div class="flex items-center gap-5 text-sm color text-slate-500">
          <div class="flex items-center gap-1">
            <LikeIcon />
            <div>{{ data.collectionCount }}</div>
          </div>
          <div class="flex items-center gap-1">
            <CommentIcon />
            <div>{{ data.commentCount }}</div>
          </div>
          <div>{{ getTimeStr(data.createTime) }}</div>
        </div>
    </section>
  </div>
</template>

<style scoped lang="scss"></style>
